// 加载公共样式
require('../../assets/css/common.less')
// 自己的样式
require('./play.less')
//axios工具类
const request = require('../../utils/request')
//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
//

const player = document.querySelector('.player')
const curIndex = document.querySelector('#curIndex')
const totalLength = document.querySelector('#totalLength')
const title = document.querySelector('#title')
const pre = document.querySelector('#pre')
const pause = document.querySelector('#pause')
const next = document.querySelector('#next')
const play1 = document.querySelector('#play1')
const progress = document.querySelector('.progress')
const popup = document.querySelector('.popup')
const continue1 = document.querySelector('#continue')
const end = document.querySelector('#end')

//获取
const fragments = JSON.parse(localStorage.getItem('fragments'))
console.log(fragments);
let index = 0;
let length = fragments.length //视频总个数
let timeList = [] //用于保存所有运动的时间
let time = 0 //记录当前时间
function play() {
    // console.log(API+fragments[0].videoUrl);
    player.src = API + fragments[index].videoUrl;
    curIndex.textContent = index + 1
    totalLength.textContent = length
    title.textContent = fragments[index].title
}
play()
// 下一曲
next.addEventListener('click', () => {
    if (index < 3) {
        console.log(index);
        index++;
        play()
        timeList.push(time)
        console.log(timeList);
        // console.log(time);
    } else {
        index = 0
        timeList.push(time)
        console.log(timeList);
        play()
    }
    play1.style.display = 'block'
    pause.style.display = 'none'
})
// 上一曲
pre.addEventListener('click', () => {
    console.log(index);
    if (index > 0) {
        index--;
        play()
        timeList.push(time)
        console.log(timeList);
    }
    else {

        index = length - 1
        timeList.push(time)
        console.log(timeList);
        play()
    }
    play1.style.display = 'block'
    pause.style.display = 'none'
})
//暂停
//  点击暂停按钮让遮罩层显示出来

pause.addEventListener('click', () => {
    //显示播放按钮 隐藏暂停按钮

    play1.style.display = 'block'

    pause.style.display = 'none'

    //暂停
    player.play()
})
//播放
play1.addEventListener('click', () => {
    //显示暂停按钮 隐藏播放按钮

    play1.style.display = 'none'
    pause.style.display = 'block'
    popup.style.display = 'block'
    //播放
    player.pause()


})
// //添加一个 timeupdate事件
player.addEventListener('timeupdate', () => {
    let percent = player.currentTime / player.duration
    progress.style.width = percent * 100 + '%'

    // 把当前时间记录在time里
    time=player.currentTime
    // console.log(time);


})
//监听结束
player.addEventListener('ended', () => {
    next.click()
})
//点击继续播放按钮回到视频继续播放
continue1.addEventListener('click', () => {
    pause.click();
    popup.style.display = 'none'
})
// 点击结束按钮
end.addEventListener('click',()=>{
    timeList.push(player.currentTime)
    console.log(timeList);
    //计算总时长
  let res=  timeList.reduce((total,cur)=>{
        return total+cur

    },0)
    // console.log(res);
    // 发送请求
    request.post('/api/exercise/save',{
        type:2,
        dduration: res,
        calorie: res * 1000,
    }).then(res=>{
        if (res.data.errno === 0) {
            //跳转到课程页面
            location.href = './run.html?page=3'
            console.log(res.data);
          }

    })

})
